<template>
    <div>
      <!-- <div v-if="chenload"> -->
				<!-- <mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail"> -->
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div class="all">
						<div class="doc" v-for="(item,index) in tab0.list">
							<img :src="img+item.avatar" alt="" @click="te(item)">
							<p @click="te(item)">{{item.name}}</p>
							<p @click="te(item)">{{item.honor}}</p>
							<p class="gray" v-if="item.collection == 1||item.collection == '1'" @click="tegrayclick(item)">已关注</p>
							<p class="blue" @click="tegrayclick(item)" v-else>关注</p>
						</div>
					</div>
				</mescroll-vue>
				<!-- </mt-loadmore> -->
				
				<!-- 登录弹窗 -->
				<div class="shoewr-chenhoupass">
					<div class="chen-contener chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">您需要先登录?</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
						</div>
					</div>
				</div>
      <!-- </div>
			<div class="loadmore" v-else>
				<img src="static/img/load.gif" alt="">
			</div> -->
    </div>
</template>

<script>
	// 引入mescroll的vue组件
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Teacher",
				components: {
				  MescrollVue
				},
      data(){
          return{
						chenload:false,
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
            teachers:[],
            img:this.$store.state.img,
						allLoaded:false,
						page:1,
          }
      },
      methods:{
        te(item){
          this.$router.push({
            path:'/steach',
            query:{
              id:item.id
            }
          })
        },
				// 点击取消
				repeatclose(){
					$('.shoewr-chenhoupass').fadeOut();
				},
				// 点击去登录
				repeatclick(){
					$('.shoewr-chenhoupass').fadeOut();
					this.d();
				},
				// 点击关注讲师
				tegrayclick(item){
					if (localStorage.getItem('token')){
					  var that = this;
					  // console.log(b)
					   that.axios.get(that.$store.state.url +'find/teacherColl',{
					  	 params:{
					  		 id:item.id
					  	 }
					   }).then(res=>{
					  	 // console.log(res.data)
					  	 if(res.data.errcode==0||res.data.errcode=='0'){
					      var teacher_collection = item.collection;
					  		if(teacher_collection==0||teacher_collection=='0'){
					  			that.$toast({
					  			  message:'关注成功',
					  			  position:'center'
					  			});
									item.collection = 1;
					  		}else{
					  			that.$toast({
					  			  message:'已取消关注',
					  			  position:'center'
					  			});
									item.collection = 0;
					  		}
								// this.teacherList(0);
					  	 }else{
					  		 that.$toast({
					  		   message:res.data.msg,
					  		   position:'center'
					  		 });
					  	 }
					   })
					} else {
					  $('.shoewr-chenhoupass').fadeIn();
					}
				},
        
				mescrollInit0 (mescroll) {
				  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},
				
				getMescrollUp (tabType) {
				  // let emptyWarpId = 'dataList' + tabType;
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				  }
				},
				upCallback (page, mescroll) {
				  if (mescroll.tabType === 0) {
				    // 全部
				    this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						this.axios.get(this.$store.state.url +'Find/teacherList',{
							 params:{
								page: page.num,
								limit:20
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							this.chenload = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data.lists;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
							 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
							 // this.tab0.list=res.data.data.order
							}
						
						})
				  }
				}
				
      },
      mounted(){
				this.loginsuccess();
        // this.teacherList(0);
      }
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
  .all{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.05rem;
  }
  .doc{
    width:2.1rem;
    background:rgba(255,255,255,1);
    box-shadow:0 0 0.1rem 0 rgba(71,68,80,0.1);
    border-radius:0.08rem;
    text-align: center;
    margin-top: 0.3rem;
    margin-left: 0.3rem;

    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 0.2rem;
  }
  .doc img{
    margin-top: 0.3rem;
    width: 1.2rem;
    height:1.2rem;
    border-radius: 50%;
  }

  .doc p:nth-child(2){
    font-size: 0.28rem;
    color:rgba(51,51,51,1);
    margin-top: 0.1rem;
    width: 100%;
  }
  .doc p:nth-child(3){
    font-size: 0.24rem;
    color: #C2C9D3;
    margin-top: 0.1rem;
    width: 100%;
		display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
  }
  .gray{
    margin: auto;
    width:1rem;
    height:0.44rem;
    background:rgba(240,240,240,1);
    border-radius:0.22rem;
    font-size:0.24rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height: 0.44rem;
    text-align: center;
    margin-top: 0.1rem;
  }
  .blue{
    margin: auto;
    width:1rem;
    height:0.44rem;
    background:rgba(2,135,255,1);
    border-radius:0.22rem;
    font-size:0.24rem;
    font-weight:500;
    color:white;
    line-height: 0.44rem;
    text-align: center;
    margin-top: 0.1rem;
  }
</style>
